<template>
	<view class="container">
		<view class="reset">
			<view class="password-box">
				<view class="passwordicon">
					<u-icon name="lock" size="30px" class="icon"></u-icon>
				</view>
				<view class="passwordinput"><input type="text" placeholder="请输入密码" clearable v-model="pass" /></view>
			</view>
			<view class="phone-box">
				<view class="passwordicon">
					<u-icon name="phone" size="30px" class="icon"></u-icon>
				</view>
				<view class="passwordinput"><input type="text" placeholder="手机号码" clearable v-model="phone" /></view>
			</view>
			<view class="verify-box">
				<view class="verifyicon">
					<u-icon name="hourglass" size="30px" class="icon"></u-icon>
				</view>
				<view class="verifyinput"><input type="text" placeholder="验证码" clearable v-model="verify" />
					<view class="getverify" @click="getverify">
						<text>{{tips}}</text>
					</view>
				</view>
			</view>
			<view class="resetbtn">
				<button type="warn" @click="resetbtn" >确定</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pass:'',
				phone:'',
				verify:'',
				tips:'获取验证码',
				seconds: 10, //倒计时所需的秒数
				newverify:''//验证码
			}
		},
		methods: {
		resetbtn(){
			if(this.pass==''||this.phone==''||this.verify==''){
				uni.showToast({
					title: '输入框不能为空',
					icon: 'none',
					duration: 2000
				});
			}
			else if(this.phone!=this.$store.state.userInfo.mobile) return  uni.showToast({
					title: '请输入账号手机号',
					icon: 'none',
					duration: 2000
				});
			else if(this.newverify!=this.verify)  return uni.showToast({
					title: '验证码错误',
					icon: 'none',
					duration: 2000
				});
		else {
			this.$post(this.API.reset,{
				password:this.pass,
				mobile:this.phone,	
				code:this.verify

			}).then((res)=>{
			uni.showToast({
						title: '修改成功',
						icon: 'success',
						duration: 2000
					}); uni.navigateBack({
						delta:1
					})
			})
		}
		},
		//验证码
		getverify() {
			uni.showToast({
				title: '正在获取验证码',
				icon: 'none',
				duration: 2000
			});
					this.show = true;
					this.newverify = Math.ceil(Math.random()*10000);
					setTimeout(() => {	
						uni.showToast({
							title: '验证码是'+this.newverify,
							icon: 'none',
							duration: 2000
						});
							setTimeout(()=>{
								this.show = false
							},1000)
					}, 2000)
					let timer = setInterval(() => {
						this.tips = '倒计时'+this.seconds--+'秒';
						if (this.seconds < -1) {
							clearInterval(timer);
							this.tips = '重新获取'
						}
				},
				1000)
		
		}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: '账号重置'
			})
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		.reset {
				position: absolute;
				top: 20%;
				left: 50%;
				transform: translate(-50%,-50%);
			.password-box,
			.phone-box,
			.verify-box {
				width: 80vw;
				position: relative;

				&::before,
				&::after {
					display: table;
					clear: both;
					content: '';
					padding: 10rpx;
				}

				.passwordicon,
				.verifyicon {
					float: left;
					width: 10vw;

					.icon {
						color: #e0bb76;
					}
				}

				.passwordinput,
				.verifyinput {
					float: left;
					border-bottom: 1px solid #ff0004;
					width: 70vw;
					
				}
				.getverify {
					position: absolute;
					right: 0px;
					top: 10px;
					font-size: 25rpx;
					z-index: 99;
				}
			}
		}
	}
</style>
